<template>
    <div class="left-bar">
        <div class="title">
            <img src="/icons/icon.png" class="logo">
            <span>校务管理</span>
        </div>
        <van-tabs v-model="activeName" type="card" sticky @click="handleClick">
            <van-tab name="total" icon="total_off.png">总览信息</van-tab>
            <van-tab name="information" icon="information_off.png">信息管理</van-tab>
            <van-tab name="orgnization" icon="orgnization_off.png">组织管理</van-tab>
            <van-tab name="class" icon="total_off.png">班级管理</van-tab>
            <van-tab name="person" icon="total_off.png">人员管理</van-tab>
            <van-tab name="term" icon="total_off.png">学期</van-tab>
            <van-tab name="room" icon="total_off.png">教室</van-tab>
            <van-tab name="resource" icon="total_off.png">资源</van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'total' // 默认选中的标签
    };
  },
  methods: {
    handleClick(name) {
      console.log(name);
    }
  }
}
</script>
<style scoped lang="scss">
    .tabs{
        width: 200px;

        el-tab-pane{
            width: 100%;
            height: 80px;
        }
    }
</style>
<style scoped lang="scss">
    .left-bar {
        width: 200px;
        height: 100%;
        background-color: #f5f5f5;
        
        .title{
            width: 100%;
            height: 80px;
            background-color: #fff;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo{
                width: 40px;
            }
    }
</style>
